<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统 - demo</title>
    <link href="./css/common.css" rel="stylesheet">
</head>

<body data-logobg="default" data-sidebarbg="default" data-headerbg="default" data-theme="default">
    <div class="layout-container">
        <!--头部信息-->
        <header class="layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> UI元素 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-36 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="0_login02.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--左侧导航-->
        <aside class="layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="images/logo-sidebar.png" title="" alt="" /></a>
            </div>
            <div class="layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="main.html"><i class="mdi mdi-home"></i> 欢迎页</a> </li>

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>示例元素+页面</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="demo01.html">UI元素</a> </li>
                                <li> <a href="0_search.html">搜索框类型</a> </li>
                                <li> <a href="0_card.html">卡片布局</a> </li>
                                <li> <a href="0_table.html">表格布局</a> </li>
                            </ul>
                        </li>

                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单示例</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="#">一级菜单</a> </li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#">一级菜单</a>
                                    <ul class="nav nav-subnav">
                                        <li> <a href="#">二级菜单</a> </li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li> <a href="#">三级菜单</a> </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li> <a href="#">一级菜单</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->


        <!--页面主要内容-->
        <main class="layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <!-- 表单 strat-->
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal" method="">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-username"><span class="sign">*</span>用户名</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="text" id="example-hf-username" name="example-hf-username" placeholder="请输入用户名..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group m-b-0">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- end -->
                        <!-- 表格 strat-->
                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li class="active"> <a href="#">表单控件</a> </li>
                                <li> <a href="demo02.html">表单控件</a> </li>
                                <li> <a href="demo03.html">其他控件</a> </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active">
                                    <div class="card">
                                        <div class="card-body">
                                            <form class="form-horizontal" action="#" method="post">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label" for="example-text-input">文本</label>
                                                        <div class="col-md-11 col-sm-11 col-xs-10">
                                                            <input class="form-control" type="text" id="example-text-input" name="example-text-input" placeholder="文本..">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label" for="date">日期</label>
                                                        <div class="col-md-4 col-sm-4 col-xs-10">
                                                            <div class="calendar-container">
                                                                <input id="date" size="16" type="text" value="2021" readonly class="datetime form_datetime form-control">
                                                                <span class="mdi mdi-calendar-text"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label" for="example-select">选择框</label>
                                                        <div class="col-md-11 col-sm-11 col-xs-10">
                                                            <select class="form-control pullselect" id="example-select" name="example-select" size="1">
                                                                <option value="0">请选择</option>
                                                                <option value="1">选项 #1</option>
                                                                <option value="2">选项 #2</option>
                                                                <option value="3">选项 #3</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label" for="example-textarea-input">文本域</label>
                                                        <div class="col-md-11 col-sm-11 col-xs-10">
                                                            <textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="6" placeholder="内容.."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label" for="example-multiple-select">多选</label>
                                                        <div class="col-md-11 col-sm-11 col-xs-10">
                                                            <select class="form-control" id="example-multiple-select" name="example-multiple-select" size="5" multiple>
                                                                <option value="1">选项 #1</option>
                                                                <option value="2">选项 #2</option>
                                                                <option value="3">选项 #3</option>
                                                                <option value="4">选项 #4</option>
                                                                <option value="5">选项 #5</option>
                                                                <option value="6">选项 #6</option>
                                                                <option value="7">选项 #7</option>
                                                                <option value="8">选项 #8</option>
                                                                <option value="9">选项 #9</option>
                                                                <option value="10">选项 #10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-2 control-label">单选｜多选</label>
                                                        <div class="col-md-3 col-sm-4">
                                                            <label class="radio-inline" for="example-inline-radio1">
                                                                <input type="radio" id="example-inline-radio1" name="example-inline-radios" value="option1">
                                                                One
                                                            </label>
                                                            <label class="radio-inline" for="example-inline-radio2">
                                                                <input type="radio" id="example-inline-radio2" name="example-inline-radios" value="option2">
                                                                Two
                                                            </label>
                                                        </div>
                                                        <div class="col-md-3 col-sm-4">
                                                            <label class="checkbox-inline" for="example-inline-checkbox1">
                                                                <input type="checkbox" id="example-inline-checkbox1" name="example-inline-checkbox1" value="option1">
                                                                One
                                                            </label>
                                                            <label class="checkbox-inline" for="example-inline-checkbox2">
                                                                <input type="checkbox" id="example-inline-checkbox2" name="example-inline-checkbox2" value="option2">
                                                                Two
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-2 control-label">开关</label>
                                                        <div class="col-md-2 col-sm-2">
                                                            <label class="switch switch-outline switch-primary control-label">
                                                            <input type="checkbox" checked="">
                                                            <span></span>
                                                          </label>
                                                        </div>
                                                        <div class="col-md-2 col-sm-2">
                                                            <label class="switch switch-outline switch-info control-label">
                                                            <input type="checkbox" checked="">
                                                            <span></span>
                                                          </label>
                                                        </div>
                                                        <div class="col-md-2 col-sm-2">
                                                            <label class="switch switch-outline switch-warning control-label">
                                                            <input type="checkbox" checked="">
                                                            <span></span>
                                                          </label>
                                                        </div>
                                                        <div class="col-md-2 col-sm-2">
                                                            <label class="switch switch-outline switch-danger control-label">
                                                            <input type="checkbox" checked="">
                                                            <span></span>
                                                          </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="col-md-1 col-sm-1 col-xs-12 control-label" for="example-file-input">上传控件</label>
                                                        <div class="col-md-10 col-sm-10 col-xs-12 upload">
                                                            <input type="file" id="example-file-input" name="example-file-input" onchange="document.getElementById('textfield').value=this.files[0].name">
                                                            <input type="text" id="textfield" name="txt" placeholder="上传控件">
                                                            <button>选择</button>
                                                        </div>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end -->
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</body>
<script type="text/javascript" src="js/commonJs.js"></script>
<script>
    /**日期控件初始化 */
    $(".form_datetime").datetimepicker({
        format: 'yyyy',
        // format: 'yyyy-mm-dd HH:ii',
        // format: 'yyyy-mm-dd',
        language: 'zh-CN',
        autoclose: true, //选择一个日期之后是否立即关闭此日期时间选择器
        // todayBtn: true,
        todayHighlight: 1,
        forceParse: 0,
        startView: 4, //日期时间选择器打开之后首先显示的视图。 可接受的值：0（hour）、1（day）、2（month）、3（year）、4（decade）
        minView: 4, //日期时间选择器所能够提供的最精确的时间选择视图，如果想只显示日期，则可设置为2或'month'
        clearBtn: true
    }).on("changeDate", function() {
        $(this).datetimepicker("update");
    });
</script>

</html>